<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态绑定style</title>
</head>
<body>

<div id="app">

  <!--  ■v-bind:style 绑定style ,以绑定对象的形式进行绑定 {key(属性名):value(属性值)} 属性名的形式可以是小驼峰的形式，也可以是原名称以-分割的形式-->
  <h2 :style="{fontSize:finalSize,color:color}">{{message}}</h2>
  <!--  ■如果是直接进行赋值的话，必须以单引号包裹起来，否则它会认为这是个变量去解析，然后就会找不到这个变量，就像这里的 50px 用单引号包裹表示他是一个值-->
  <h2 :style="{fontSize:'50px'}">{{message}}</h2>
  <h2 :style="{fontSize:finalNum+'px',backgroundColor:'red'}">{{message}}</h2>
  <!--  ■也可以调用方法的方式返回对象的形式进行绑定-->
  <h2 :style="getStyle()">{{message}}</h2>
  <!--  ■也可以是数组的形式来进行数据绑定-->
  <h2 :style="[backGround,fontSize]">{{message}}</h2>
  <!--  ■也可以调用方法的方式返回数组的形式进行绑定-->
  <h2 :style="getStyle2()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "vue app",
      finalSize: "50px",
      finalNum: 50,
      color: 'red',
      backGround: {backgroundColor: "red"},
      fontSize: {fontSize: "50px"},
    },
    methods: {
      getStyle: function () {
        return {fontSize: this.finalSize}
      },
      getStyle2: function () {
        return [{backgroundColor: "red"},{fontSize: "50px"}]
      }
    }
  });
</script>
</body>
</html>